<template>
  <div class="home-body">
    <v-homeh class="home-top" :class="[titleFled]"></v-homeh>
    <v-homeswiper :listBanner="listBanner"></v-homeswiper >
    <v-homecatalog :listNav="listNav"></v-homecatalog >
    <v-homehot  :hotContentList = "hotContentList"
                :hotPriseList="hotPriseList"
                :hotTrendList="hotTrendList"></v-homehot>
    <v-homeweek :listWeek="listWeek"></v-homeweek>
    <v-homeguess  :listGuess="listGuess"></v-homeguess>
  </div>
</template>

<script>
  import axios from 'axios'
  import homeHeader from './components/homeHeader'
  import homeSwiper from './components/homeSwiper'
  import homeCatalog from './components/homeCatalog'
  import homeHot from './components/homeHot'
  import homeWeek from './components/homeWeek'
  import homeGuess from './components/homeGuess'
  export default {
    components: {
      'v-homeh': homeHeader,
      'v-homeswiper': homeSwiper,
      'v-homecatalog': homeCatalog,
      'v-homehot': homeHot,
      'v-homeweek': homeWeek,
      'v-homeguess': homeGuess
    },
    name: "Home",
    data() {
      return {
        titleFled: '',
        listNav:[],
        listGuess:[],
        hotContentList:[],
        hotPriseList:[],
        listWeek:[]
      }
    },
    methods: {
      getHomeData(){
          axios.get('/api/index.json').then(this.getHomeDataSucc)
      },
      getHomeDataSucc(res){
        res = res.data;
        if(res.data){
          let data = res.data;
          console.log(data);
          this.listNav = data.listNav;
          this.listGuess = data.listGuess;
          this.hotContentList = data.hotContentList;
          this.hotPriseList = data.hotPriseList;
          this.hotTrendList = data.hotTrendList;
          this.listBanner = data.listBanner;
          this.listWeek = data.listWeek;
        }

      },
      scrollChange() {
        let hights = document.documentElement.scrollTop;
        let clientHight = document.documentElement.clientHeight / 3;

        if (hights > clientHight) {
          this.titleFled = 'titleFled'
        } else {
          this.titleFled = ''
        }

      }
    },
    mounted() {
      this.getHomeData()
      window.addEventListener('scroll', this.scrollChange)

    }
  }
</script>

<style lang="stylus" scoped>
  .titleFled
    width: 100%
    line-height: 0.9rem
    background: #6fcdbb
    text-align center
    display flex
    position: fixed
    top: 0
    left: 0
    z-index: 999
    .home-body
      position: relative
      .home-top
        position: absolute
        width: 100%
        top: 0
        left: 0
        z-index: 999

</style>
